<template>
    <div>
        <el-card shadow="never">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input v-model="queryInput" placeholder="请输入内容" @keyup.enter="getOrders" clearable
                        @clear="getOrders">
                        <template #append>
                            <el-button :icon="SearchOutlined" @click="getOrders"></el-button>
                        </template>
                    </el-input>
                </el-col>
            </el-row>


            <el-table :data="ordersData" style="width: 100%" stripe>
                <el-table-column type="index" label="#" />
                <el-table-column prop="order_number" label="订单编号"/>
                <el-table-column prop="order_price" label="订单价格"/>
                <el-table-column prop="order_pay" label="是否付款"/>
                <el-table-column prop="is_send" label="是否发货">
                    <template #default="scope1">
                        <el-button type="danger" v-if="scope1.row.order_pay" plain size="small">未付款</el-button>
                        <el-button type="success" v-else plain size="small">已付款</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="下单时间">
                    <template #default="scope2">
                        {{ moment(parseInt(scope2.row.create_time * 1000)).format('YYYY-MM-DD hh:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template #default="scope3">
                        <el-button type="primary" :icon="EditOutlined" size="small" @click="editAddress"></el-button>
                        <el-button type="success" :icon="EnvironmentOutlined" size="small"
                            @click="getProgress(scope3.row.order_id)"></el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination v-model:currentPage="currentPage" v-model:pageSize="pageSize" :page-sizes="[10, 20, 30, 40]"
                :size="small" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        </el-card>


        <el-dialog v-model="dialogAddressVisible" title="修改地址" @closed="resetDialog">
            <el-form :model="addressForm" :rules="rules" ref="addressFormRef">
                <el-form-item :label="省市区 / 县" :label-width="formLabelWidth" prop="area">
                    <!-- <el-input v-model="addressForm.area" autocomplete="off" /> -->
                    <el-cascader v-model="addressForm.area" :options="cityData" :props="props" @change="handleChange"
                        :clearable="true" :teleported="false"></el-cascader>
                </el-form-item>
                <el-form-item :label="详细地址" :label-width="formLabelWidth" prop="details">
                    <el-input v-model="addressForm.details" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogAddressVisible = false">取消</el-button>
                    <el-button @click="setAddress(addressFormRef)" type="primary">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="dialogPropressVisible" title="物流进度" width="30%">
            <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time">
                    {{ activity.context }}
                </el-timeline-item>
            </el-timeline>
        </el-dialog>
    </div>
</template>
<script setup>
import { SearchOutlined, EditOutlined, EnvironmentOutlined } from '@ant-design/icons-vue';
import axios from 'axios';
import { ref, onBeforeMount, reactive } from 'vue'
import formatTime from '../../assets/js/formatTime.js'
import cityData from '../../assets/js/citydata.js'
import '../../mock/kuaidi.js'
import moment from 'moment'
const queryInput = ref('')
const ordersData = ref([])
const getOrders = async () => {
    console.log(queryInput);
    const { data: res } = await axios.get(`orders`, {
        params: {
            query: queryInput.value,
            pagenum: currentPage.value,
            pagesize: pageSize.value
        }
    })
    console.log(res);
    if (res.meta.status !== 200) return
    ordersData.value = res.data.goods
    total.value = res.data.total;
}


onBeforeMount(() => {
    getOrders()
})

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(1)

const handleSizeChange = (val) => {
    pagesize.value = val
    getOrders();
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getOrders();
}

const dialogAddressVisible = ref(false)
const formLabelWidth = '140px'
const addressForm = reactive({
    area: '',
    details: ''
})
const addressFormRef = ref(null)
const rules = reactive({
    area: [{
        requried: true, message: '请选择省市区/县', trigger: 'blur'
    }],
    details: [
        { requried: true, message: '请输入详细地址', trigger: 'blur' }
    ]
})

const setAddress = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            console.log('submit');
        }
    })
}

const resetDialog = () => {
    addressForm.area = ''
    addressForm.details = ''
}

const editAddress = () => {
    dialogAddressVisible.value = true
}

const props = {
    expandTrigger: 'hover'
}
const handleChange = (value) => {
    console.log(value);
}
// const options=[]
const activities = ref([])
const getProgress = async (id) => {
    dialogPropressVisible.value = true
    const { data: res } = await axios.get('kuaidi/1106975712662')
    console.log(res);
    if (res.meta.status !== 200) return
    activities.value = res.data
}
const dialogPropressVisible = ref(false)
</script>
<style>
.el-table {
    margin: 10px  auto
}
</style>